<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./JavaScript/jquery-3.7.1.js"></script>
  </head>
  <body>
    <button id="btn01">4</button>
    <div></div>
    <script>
      /* 
            -核心函数的作用
                -两种作用
                    1. 将它作为工具类使用
                        - 在核心函数中JQuery为我们提供了多个工具方法

                    2. 将它作为函数使用
                        - 将一个函数作为$的参数
                            - 这个函数会在文档完毕后运行
                        - 相当于
                            document.addEventlistener("DOMConterLoaded",function(){})
                        - 将选择器字符组我诶参数
                            - jQuery 自动取网页中查找元素
                            - 作用相当于 document.querySelectorAll("...")
                            - 注意:
                                通过jQuery核心函数查询到的结果并不是原生的DOM对象,
                                    而是一个经过jQuery包装过的新对象,方便我们做各种DOM操作
                                        但是jQuery对象不能直接调用原生DOM对象的方法
                                        通过我们为jQuery对象令名时,会使用$开头,加以区分
                        
                        - 将DOM对象作为参数
                            - 可以将DOM对象转换为jQuery对象,从而使用jQuery对象的方法

                        - 将HTML代码作为参数
                            - 会根据html代码来创建元素(jQuery对象)
        
        */

      $(function () {
        var btn01 = document.getElementById('btn01');
        var $btn01 = $('#btn01');
        alert($btn01); // 返回的是object object 也就是一个对象
        alert(btn01); //返回的是 object HTMLButtonElment 返回的是DOM对象

        console.log($(btn01));
        var $h1 = $('<h1>GG</h1>'); //会根据html代码创建元素
        $('div').append($h1);
      });
    </script>
  </body>
</html>
